<template>
	<div class="p-6 space-y-6">
		<el-tabs v-model="activeTab">
			<el-tab-pane label="物料信息" name="material">
				<el-button type="primary" size="small" class="mb-4" @click="openMaterialDialog">新建物料</el-button>
				<el-table :data="materials" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="物料名称" />
					<el-table-column prop="unit" label="单位" />
					<el-table-column prop="category" label="分类" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="单位管理" name="unit">
				<el-button type="primary" size="small" class="mb-4" @click="openUnitDialog">新建单位</el-button>
				<el-table :data="units" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="单位名称" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="币别管理" name="currency">
				<el-button type="primary" size="small" class="mb-4" @click="openCurrencyDialog">新建币别</el-button>
				<el-table :data="currencies" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="币别名称" />
					<el-table-column prop="symbol" label="符号" />
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<!-- 弹窗 -->
		<el-dialog v-model="materialDialog" title="新建物料" width="400px">
			<el-form :model="currentMaterial" label-width="80px">
				<el-form-item label="名称">
					<el-input v-model="currentMaterial.name" />
				</el-form-item>
				<el-form-item label="单位">
					<el-input v-model="currentMaterial.unit" />
				</el-form-item>
				<el-form-item label="分类">
					<el-input v-model="currentMaterial.category" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveMaterial">保存</el-button>
					<el-button @click="materialDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="unitDialog" title="新建单位" width="400px">
			<el-form :model="currentUnit" label-width="80px">
				<el-form-item label="单位名称">
					<el-input v-model="currentUnit.name" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveUnit">保存</el-button>
					<el-button @click="unitDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="currencyDialog" title="新建币别" width="400px">
			<el-form :model="currentCurrency" label-width="80px">
				<el-form-item label="名称">
					<el-input v-model="currentCurrency.name" />
				</el-form-item>
				<el-form-item label="符号">
					<el-input v-model="currentCurrency.symbol" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveCurrency">保存</el-button>
					<el-button @click="currencyDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('material')

const materials = ref([])
const units = ref([
	{ name: '瓶' }, { name: '桶' }, { name: '包' }, { name: '箱' }, { name: '个' }
])

const currencies = ref([])

const materialDialog = ref(false)
const unitDialog = ref(false)
const currencyDialog = ref(false)

const currentMaterial = ref({ name: '', unit: '', category: '' })
const currentUnit = ref({ name: '' })
const currentCurrency = ref({ name: '', symbol: '' })

const openMaterialDialog = () => {
	currentMaterial.value = { name: '', unit: '', category: '' }
	materialDialog.value = true
}

const saveMaterial = () => {
	materials.value.push({ ...currentMaterial.value })
	ElMessage.success('物料已保存')
	materialDialog.value = false
}

const openUnitDialog = () => {
	currentUnit.value = { name: '' }
	unitDialog.value = true
}

const saveUnit = () => {
	units.value.push({ ...currentUnit.value })
	ElMessage.success('单位已保存')
	unitDialog.value = false
}

const openCurrencyDialog = () => {
	currentCurrency.value = { name: '', symbol: '' }
	currencyDialog.value = true
}

const saveCurrency = () => {
	currencies.value.push({ ...currentCurrency.value })
	ElMessage.success('币别已保存')
	currencyDialog.value = false
}

// 生成15条物料模拟数据
const materialNames = ['EUV光刻胶', 'G线光刻胶', '紫外宽谱光刻胶', '电子光束刻胶', '氧化硅抛光液', '氧化铝抛光液', '纳米抛光液', '显影液', '去胶剂', '清洗剂', '蚀刻液', '助焊剂', '防锈油', '导电胶', '热熔胶']
const categories = ['化学品', '辅料', '设备', '其他']
materials.value = Array.from({ length: 15 }).map((_, i) => ({
	name: materialNames[i % materialNames.length],
	unit: units.value[Math.floor(Math.random() * units.value.length)].name,
	category: categories[Math.floor(Math.random() * categories.length)]
}))

// 生成10条币别模拟数据
const currencyList = [
	{ name: '人民币', symbol: '¥' },
	{ name: '美元', symbol: '$' },
	{ name: '欧元', symbol: '€' },
	{ name: '日元', symbol: '¥' },
	{ name: '港币', symbol: 'HK$' },
	{ name: '澳元', symbol: 'A$' },
	{ name: '英镑', symbol: '£' },
	{ name: '加元', symbol: 'C$' },
	{ name: '新加坡元', symbol: 'S$' },
	{ name: '韩元', symbol: '₩' }
]
currencies.value = [...currencyList]
</script>


<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
